<template>
  <div class="app-container" v-loading="loading">
    <el-form>
      <el-form-item>
        <el-button type="success" @click="print">打印结果</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="newArr" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}" border>
      <el-table-column type="index" label="序号" align="center">
      </el-table-column>
      <el-table-column prop="proName" label="项目名称" align="center">
      </el-table-column>
      <el-table-column prop="score" label="当前得分" sortable align="center" width="150px">
      </el-table-column>
    </el-table>
    <div id="main" style="width: 1350px;height:400px;"> </div>
  </div>
</template>
<script>
import { selectAllScore } from "@/api/system/project/project";
import * as echarts from 'echarts';
export default {
  data () {
    return {
      loading: true,
      score: [],
      scoreData: [],
      newArr: []
    }
  },
  created () {
    this.getScore()
    setTimeout(() => {
      this.analysis()
      this.loading = false
    }, 2000);
  },
  methods: {
    print () {
      this.$router.push({ path: "/Ranking/ranking", query: { newArr: this.newArr } })
    },
    //   获取所有分数
    getScore () {
      selectAllScore().then(res => {
        this.score = res.rows
        this.score.map(item => {
          if (item.score == null || '') {
            item.score = 0
          } else {
            item.score = parseInt(item.score)
          }
        })
      })
    },
    // 分数按项目ID汇总分数
    analysis () {
      var temp = {};
      for (var i in this.score) {
        var proId = this.score[i].proId;
        if (temp[proId]) {
          temp[proId].score += parseInt(this.score[i].score);
        } else {
          temp[proId] = this.score[i]
        }
      }
      this.newArr = []
      for (var j in temp) {
        this.newArr.push(temp[j])
      }
    },
    // 图表分析
    init: function () {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      const data = []
      for (let i = 0; i < this.newArr.length; ++i) {
        data.push(this.newArr[i].score);
      }
      option = {
        title: {
          text: '获奖数据分析',
        },
        xAxis: {
          max: 'dataMax'
        },
        yAxis: {
          type: 'category',
          data: ['第一名', '第二名', '第三名', '第四名', '第五名'],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 4 // only the largest 3 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            name: '专利得分情况',
            type: 'bar',
            data: data,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            },
          }
        ],
        legend: {
          show: true
        },

        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      };
      option && myChart.setOption(option);
    },

  },
  mounted () {
    setTimeout(() => {
      this.init()
    }, 2000);
    setTimeout(() => {
      this.newArr = (this.newArr.sort((a, b) => { return b.score - a.score })).slice(0, 3)//降序
      this.init()
    }, 2000);
  },

}
</script>
<style scoped>
</style>